<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>美宜佳售卖系统管理端</title>
    <link rel="shortcut icon" href="favicon.ico">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="plugins/element-ui/index.css"/>
    <link rel="stylesheet" href="styles/common.css"/>
    <link rel="stylesheet" href="styles/index.css"/>
    <link rel="stylesheet" href="styles/icon/iconfont.css"/>
    <style>
        .body {
            min-width: 1366px;
        }

        .app-main {
            height: calc(100% - 64px);
        }

        .app-main .divTmp {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
<div class="app" id="app">
    <div class="app-wrapper openSidebar clearfix">
        <!-- 左侧黑色部分导航栏 -->
        <div class="sidebar-container">
            <!-- 导航栏上方的logo 可更换-->
            <div class="logo">
                <img src="images/login/login-logo.png" alt="" style="width: 200px; height: 120px"/>
            </div>
            <!-- 侧边栏的主要内容  位于logo下方-->
            <el-scrollbar wrap-class="scrollbar-wrapper">
                <el-menu :default-active="defAct"
                         :unique-opened="false"
                         :collapse-transition="false"
                         background-color="#343744"
                         text-color="#bfcbd9"
                         active-text-color="#f4f4f5">
                    <!--
                    侧边栏的每个列表可能是一个菜单组也可能是一个最基本的子菜单
                    @el-submenu   标签表示他是菜单组
                    菜单组就是一旦点击 就会在下方展开其所包含的子菜单(当然他也可能也是一个菜单组,这个菜单组下面才是子菜单)

                    @el-menu-item 表示子菜单
                    子菜单就是一旦点击 右侧核心部分就会进行对应跳转
                    -->
                    <!-- 根据是否有children属性判断其是否构成菜单组-->
                    <div v-for="item in menuList" :key="item.id">
                        <!--  菜单组-->
                        <el-submenu :index="item.id" v-if="item.children && item.children.length>0">
                            <!-- 子菜单组 -->
                            <template slot="title">
                                <!--  子菜单组 的图标-->
                                <i class="iconfont" :class="item.icon"></i>
                                <!--  子菜单组 的名称-->
                                <span>{{item.name}}</span>
                            </template>
                            <!-- 单个子菜单 -->
                            <el-menu-item
                                    v-for="sub in item.children"
                                    :index="sub.id"
                                    :key="sub.id"
                                    @click="menuHandle(sub,false)">
                                <!-- 单个子菜单的图标-->
                                <i :class="iconfont" :class="sub.icon"></i>
                                <!--  单个子菜单的名称-->
                                <span slot="title">{{sub.name}}</span>
                            </el-menu-item>
                        </el-submenu>

                        <!--  子菜单 -->
                        <el-menu-item :index="item.id" v-else
                                      @click="menuHandle(item,false)">
                            <!--   子菜单的图标-->
                            <i class="iconfont" :class="item.icon"></i>
                            <!--   子菜单的名称-->
                            <span slot="title">{{item.name}}</span>
                        </el-menu-item>
                    </div>
                </el-menu>
            </el-scrollbar>
        </div>
        <!-- 右侧网页核心显示部分 点击左侧子菜单切换的就是这一部分内容 -->
        <div class="main-container">
            <!-- 位于核心部分的上方 显示核心内容的的标题/返回/登出按钮-->
            <div class="navbar">
                <!--  返回/标题-->
                <div class="head-lable">
                    <!-- 核心部分的返回按钮 通过 goBackFlag 控制-->
                    <span v-if="goBackFlag" class="goBack" @click="goBack()">
                       <img src="images/icons/btn_back@2x.png" alt=""/>返回
                    </span>
                    <!--  该网页的标题名称-->
                    <span>{{headTitle}}</span>
                </div>
                <!--  管理员名称/退出-->
                <div class="right-menu">
                    <!--  当前登录网页的名字-->
                    <div class="avatar-wrapper">
                        <el-tooltip class="item" effect="dark" content="个人中心" placement="bottom">
                            <el-link type="primary" v-bind:href="center">{{ userInfo.name }}</el-link>
                        </el-tooltip>
                    </div>
                    <!--  退出登录的按钮-->
                    <img src="images/icons/btn_close@2x.png" class="outLogin" alt="退出" @click="logout"/>
                </div>
            </div>
            <!-- 核心内容部分 根据loading的值是确定核心部分显示内容-->
            <div class="app-main" v-loading="loading">
                <!--显示转圈圈动画-->
                <div class="divTmp" v-show="loading"></div>
                <!--显示内容-->
                <iframe
                        id="cIframe"
                        class="c_iframe"
                        name="cIframe"
                        :src="iframeUrl"
                        width="100%"
                        height="auto"
                        frameborder="0"
                        v-show="!loading">
                </iframe>
            </div>
        </div>
    </div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="plugins/axios/axios.min.js"></script>
<script src="js/request.js"></script>
<script src="api/login.js"></script>
<script>

    new Vue({
        el: '#app',
        data() {
            return {
                defAct: '2', //初始化页面之后默认显示导航栏的的菜单id
                menuActived: '2', //当前活动的菜单id
                userInfo: {}, //存放当前登录进来的用户信息(员工/管理员),他会在登陆成功后进行储存
                iframeUrl: 'page/member/list.html', //右侧核心部分的核心内容url
                headTitle: '员工列表', //表示 核心部分 的标题
                goBackFlag: false, //控制 核心部分 的返回按钮是否出现
                loading: true, //表示右侧 核心部分内容是否在加载状态
                timer: null,//存放定时器设置的时候的返回id,用于关闭计时器
                center: '/backend/page/Center.html',//个人中心路径(暂未实现)
                adminFlag: false,  //根据上一条判断当前登录的用户是否
            }
        },
        //属性计算
        computed: {
            // 根据管理员标记计算不同的显示页面
            menuList: function () {
                let list;
                if (this.adminFlag === true) {
                    list = [
                        {
                            id: '1',
                            name: '管理员列表',
                            url: 'page/admin/list.html',
                            icon: 'icon-member'
                        },
                        {
                            id: '2',
                            name: '员工管理',
                            url: 'page/member/list.html',
                            icon: 'icon-member'
                        },
                        {
                            id: '3',
                            name: '用户管理',
                            url: 'page/user/list.html',
                            icon: 'icon-member'
                        },
                        {
                            id: '4',
                            name: '分类管理',
                            url: 'page/category/list.html',
                            icon: 'icon-category'
                        },
                        {
                            id: '5',
                            name: '玩具管理',
                            url: 'page/toy/list.html',
                            icon: 'icon-combo'
                        },
                        {
                            id: '6',
                            name: '套餐管理',
                            url: 'page/combo/list.html',
                            icon: 'icon-combo'
                        },
                        {
                            id: '7',
                            name: '订单管理',
                            url: 'page/order/list.html',
                            icon: 'icon-order'
                        }
                    ]
                } else {
                    //管理类型 1 用户 2分类 3单品 4套餐 5订单 0all
                    if (this.manageType === 1) {
                        list = [
                            {
                                id: '2',
                                name: '员工列表',
                                url: 'page/member/list.html',
                                icon: 'icon-member'
                            }, {
                                id: '3',
                                name: '用户管理',
                                url: 'page/user/list.html',
                                icon: 'icon-member'
                            }
                        ]
                    } else if (this.manageType === 2) {
                        list = [
                            {
                                id: '2',
                                name: '员工列表',
                                url: 'page/member/list.html',
                                icon: 'icon-member'
                            },
                            {
                                id: '4',
                                name: '分类管理',
                                url: 'page/category/list.html',
                                icon: 'icon-category'
                            }
                        ]
                    } else if (this.manageType === 3) {
                        list = [
                            {
                                id: '2',
                                name: '员工列表',
                                url: 'page/member/list.html',
                                icon: 'icon-member'
                            },
                            {
                                id: '5',
                                name: '玩具管理',
                                url: 'page/toy/list.html',
                                icon: 'icon-combo'
                            }
                        ]
                    } else if (this.manageType === 4) {
                        list = [
                            {
                                id: '2',
                                name: '员工列表',
                                url: 'page/member/list.html',
                                icon: 'icon-member'
                            },
                            {
                                id: '6',
                                name: '套餐管理',
                                url: 'page/combo/list.html',
                                icon: 'icon-combo'
                            }
                        ]
                    } else if (this.manageType === 5) {
                        list = [
                            {
                                id: '2',
                                name: '员工管理',
                                url: 'page/member/list.html',
                                icon: 'icon-member'
                            },
                            {
                                id: '7',
                                name: '订单管理',
                                url: 'page/order/list.html',
                                icon: 'icon-order'
                            }
                        ]
                    } else {
                        //管理所有
                        list = [
                            {
                                id: '2',
                                name: '员工列表',
                                url: 'page/member/list.html',
                                icon: 'icon-member'
                            },
                            {
                                id: '3',
                                name: '用户管理',
                                url: 'page/user/list.html',
                                icon: 'icon-member'
                            },
                            {
                                id: '4',
                                name: '分类管理',
                                url: 'page/category/list.html',
                                icon: 'icon-category'
                            },
                            {
                                id: '5',
                                name: '玩具管理',
                                url: 'page/toy/list.html',
                                icon: 'icon-combo'
                            },
                            {
                                id: '6',
                                name: '套餐管理',
                                url: 'page/combo/list.html',
                                icon: 'icon-combo'
                            },
                            {
                                id: '7',
                                name: '订单管理',
                                url: 'page/order/list.html',
                                icon: 'icon-order'
                            }
                        ]
                    }

                }
                return list;
            },
            manageType: function () {
                return this.userInfo.manageType;
            } //若是员工则要根据管理的类型显示不同的界面

        },
        created() {
            //渲染页面时 取出登录用户的信息 这个信息会在登录成功时由前端存放
            const userInfo = window.localStorage.getItem('userInfo')
            if (userInfo) {
                this.userInfo = JSON.parse(userInfo);
            }
            //取出管理员标记 这个标记会在登陆成功时额外存放,若是没有则adminFlag的值就不会有变化
            const adminFlag = window.localStorage.getItem('admin')
            if (adminFlag) {
                //将管理员标记取出
                this.adminFlag = Boolean(adminFlag);
            }
            //关闭正在加载的动画
            this.closeLoading()
        },
        //该方法用于关闭页面时候清除计时器,它的值需为设置计时器时返回的值
        beforeDestroy() {
            clearTimeout(this.timer)
        },
        //初始化完毕时加载一次菜单
        mounted() {
            window.menuHandle = this.menuHandle
        },
        methods: {
            //登出
            logout() {
                if (this.adminFlag === true) {
                    //管理员登出
                    logoutApiOfAdmin().then((res) => {
                        if (res.code === 1) {
                            //清除登录的用户信息
                            localStorage.removeItem('userInfo')
                            //清除管理员的信息标记
                            localStorage.removeItem('admin')
                            //重定向到登录页面
                            window.location.href = 'page/login/login.html'
                        }
                    })
                } else {
                    //员工登出
                    logoutApiOfEmployee().then((res) => {
                        if (res.code === 1) {
                            //清除登录的用户信息
                            localStorage.removeItem('userInfo')
                            //重定向到登录页面
                            window.location.href = 'page/login/login.html'
                        }
                    })
                }
            },
            //核心页面的返回功能
            goBack() {
                /*JavaScript.Array.find 这个方法要求传入一个函数,数组中每有一个值就会执行一次该函数
                若是数组中有值符合这个函数的规则则会返回该值（并且不检查剩余值） 否则返回 undefined
                它不改变原数组,不对空数组执行该方法*/

                //返回一个值,这个值需要等于当前活动的菜单id
                const menu = this.menuList.find(item => item.id === this.menuActived)
                //传入活动的菜单id,并重新加载一次菜单
                this.menuHandle(menu, false)
            },
            //核心部分跳转方法
            //item为 子菜单的id,goBackFlag表示此次跳转是否显示为核心部分标题左侧的按钮是否出现
            menuHandle(item, goBackFlag) {
                this.loading = true //修改加载动画为true 表示正在加载
                this.menuActived = item.id //修改当前活动的菜单id
                this.iframeUrl = item.url //修改右侧核心内容显示的url
                this.headTitle = item.name //修改核心内容上方的标题
                this.goBackFlag = goBackFlag //修改核心内容左上方的返回按钮是否显示
                this.closeLoading() //关闭加载动画
            },
            // 设置一个一次性计时器,内容是修改核心部分的加载动画停止掉
            // 这个计时器的返回值需要赋值给timer用于清空/停止这个计时器
            closeLoading() {
                this.timer = null
                this.timer = setTimeout(() => {
                    this.loading = false
                }, 1000)
            }
        }
    })
</script>
</body>
</html>
